<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-原生ajax1</title>
    <style>
        #show{
            width: 400px;
            height: 200px;
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
    <!-- 
        AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML）
        AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。
        AJAX 并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。
        AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。
        通过在幕后与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，AJAX 技术可以使网页更迅速地响应。
     -->
    <div id="show"></div>
    <button id="btn">请求数据</button>
    <script>
        //封装一个创建标签的方法
        function c(v){
            return document.createElement(v)
        }
        btn.onclick = function(){
            // GET 方式请求
            //1. 创建AJAX对象：采用http协议请求XML数据的对象
            let xhr = new XMLHttpRequest()
            //2. 初始化 设置请求方法 和 URL
            //必须要明确请求的方式：GET / Post
            //必须要传一个请求的地址，请求一个本地的json文件
            xhr.open('GET','./data/stu.json');
            //3.发送
            xhr.send()
            //4. 事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function(){
                //判断xhr的请求状态 （分为：0，1，2，3，4） 就是一个请求经历的过程
                //0：请求未初始化，还没有调用 open()
                //1：请求已经建立，但是还没有发送，还没有调用 send()
                //2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
                //3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
                //4：响应已完成；您可以获取并使用服务器的响应了。
                if(xhr.readyState === 4){
                    //判断响应状态码 
                    //200(成功) 
                    //304(第二重复请求) 
                    //404(没有找到请求的资源) 
                    //403(请求资源的访问被服务器拒绝) 
                    //401(请求需要有通过 HTTP 认证的认证信息) 
                    //500(服务器端在执行请求时发生了错误)
                    //状态码总结：2**成功 3**重定向 4**客户端错误 5**服务器错误
                    if(xhr.status >= 200 && xhr.status<400){
                        //JSON.parse()方法，用于将json字符串数据转为js对象
                        let stu = JSON.parse(xhr.response)
                        //JSON.stringify()方法，用于将js对象转为json字符串数据
                        // let str = JSON.stringify(stu)
                        // console.log(str);
                        let div1 = c("div")
                        div1.innerHTML = '姓名：'+stu.name
                        let div2 = c("div")
                        div2.innerHTML = '年龄：'+stu.age
                        let div3 = c("div")
                        div3.innerHTML = '性别：'+stu.gender
                        show.appendChild(div1)
                        show.appendChild(div2)
                        show.appendChild(div3)
                    }
                }
            }
        }
    </script>
</body>
</html>